<template>
  <div class="email-verification">
    <h2>Change Login Password</h2>
    <el-form label-position="left" label-width="200px" :model="loginForm">
      <el-form-item label="Current Password">
        <el-input type='password' v-model="loginForm.current_password" @input="testAndVerify" placeholder="Enter Current Password"></el-input>
      </el-form-item>
      <el-form-item label="New Passwprd">
        <el-input type='password' v-model="loginForm.new_password" @input="testAndVerify" placeholder="Enter New Password"></el-input>
      </el-form-item>
      <el-form-item label="Confirm Password">
        <el-input type='password' v-model="loginForm.confirm_password" @input="testAndVerify" placeholder="Confirm New Password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :type="primary" :disabled="confirmdb" @click="confirmPassword" class="email-confirm">CONFIRM</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { setTime } from "@/filter/index";
import { changeLoginPassword } from "@/api/kycAttest";
export default {
  data() {
    return {
      loginForm: {
        current_password: "",
        new_password: "",
        confirm_password: ""
      },
      confirmdb: true,
      primary: 'info'
    };
  },
  methods: {
    /**
     * [confirmPassword description]
     * 修改密码
     * ------------------------------
     * @Author   LLP
     * @DateTime 2019-12-24T17:44:24+0800
     * @return   {[type]}                 [description]
     */
    async confirmPassword() {
      let param = {
        ...this.loginForm
      }
      let { data } = await changeLoginPassword(param)
      if (data === null) {
        this.$message({
          message: 'Password modified successfully.',
          type: 'success'
        });
        this.$router.push({ path: '/account' })
      }
    },
    /**
     * [testAndVerify description]
     * 按钮可操作
     * -----------------------------------
     * @Author   LLP
     * @DateTime 2019-12-24T17:44:48+0800
     * @return   {[type]}                 [description]
     */
    testAndVerify() {
      let from = this.loginForm
      if (from.current_password !="" && (from.new_password !="" && from.confirm_password)) {
        this.confirmdb = false
        this.primary = 'primary'
      } else {
        this.confirmdb = true
        this.primary = 'info'
      }
    }
  }
};
</script>
<style lang="less" scoped>
.email-verification {
  height: 100vh;
  h2 {
    font-size: 26px;
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 2px solid #edf0f4;
  }
  .el-form {
    padding: 45px 160px 0 0;
    .email-code {
      width: 450px;
      margin-right: 38px;
      display: inline-block;
    }
    .get-code {
      width: 105px;
    }
    .email-confirm {
      width: 100%;
    }
  }
}
</style>